<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
事件对象，它被自动传递给事件处理函数，以提供额外的功能和信息<br>
事件对象 e 的target属性始终是事件刚刚发生的元素的引用<br>
event<br>
<button id="bt1">click</button>
<br>
<button onclick="f2()">click</button>
<br>
<button id="bt3">click</button>
<br>
<form>
  <div>
    <label for="fname">First name: </label>
    <input id="fname" type="text">
  </div>
  <div>
    <label for="lname">Last name: </label>
    <input id="lname" type="text">
  </div>
  <div>
    <input id="submit" type="submit">
  </div>
</form>
默认是冒泡的
<div onclick="f5('div1')">
  1
  <div onclick="f5('div2')">
    2
    <div onclick="f5('div3')">3</div>
  </div>
</div>
<script>
  console.group('事件')
  console.group('事件处理器属性')
  let bt1 = document.getElementById('bt1')
  //对象属性赋值
  bt1.onclick = function () {
    console.log('bt1 click')
  }
  console.groupEnd()
  console.group('行内事件处理器 - 请勿使用')

  function f2() {
    console.log('bt2 click')
  }

  console.groupEnd()
  console.group('addEventListener()和removeEventListener()')
  let bt3 = document.getElementById('bt3')

  function f3() {
    console.log('bt3 click')
  }

  function f4(val) {
    console.error(val)
  }

  bt3.addEventListener('click', f3, true)//捕获
  bt3.addEventListener('click', f4)

  setTimeout(() => {
    bt3.removeEventListener('click', f3)
  }, 3000)
  console.groupEnd()
  console.group('阻止默认行为')
  let form = document.querySelector('form');
  let fname = document.getElementById('fname');
  let lname = document.getElementById('lname');
  let submit = document.getElementById('submit');
  let para = document.querySelector('p');

  form.onsubmit = function (e) {
    if (fname.value === '' || lname.value === '') {
      e.preventDefault();
      para.textContent = 'You need to fill in both names!';
    }
  }
  console.groupEnd()
  console.group('事件冒泡及捕获')

  function f5(name) {
    console.log(name)
    // e.stopPropagation();
  }

  console.groupEnd()
  console.groupEnd()
</script>
</body>
</html>
